<template>
  <div>
    <mm-header></mm-header>
    <div class="container">
      <div class="container-title">
        <router-link to="/">首页</router-link>
        >
        <a href="javascript:void(0)" @click="handleBack">
          {{categoryTitle}}
        </a>
        >
        <a href="#">{{productName}}</a>
        >
        <!-- <button class="fr mui-btn-xs">筛选</button> -->
      </div>
      <div class="mui-card">
        <!--页眉，放置标题-->
        <div class="mui-card-header">
          {{productTitle}}
        </div>
        <!--内容区-->
        <div class="mui-card-content">
          <div class="imgWrap">
            <img :src="imgUrl()" alt="">
          </div>
        </div>
        <!--页脚，放置补充信息或支持的操作-->
        <div class="mui-card-footer mui-row">
          <div class="mui-col-xs-4">比价购买</div>
          <div class="mui-col-xs-4">产品参数</div>
          <div class="mui-col-xs-4">评论</div>
        </div>
      </div>

      <div class="mall clearfix">
        <div class="mall-left fl">
          {{productMall}}
        </div>
        <div class="mall-right fr">
          <span>{{productPrice}}</span>
          <button class="mui-btn">去购买</button>
        </div>
      </div>
      <div class="mall-tip">
        <p>
          * 实际价格以个网站列出的实时销售为准，我们提供的价格可能有数小时至数日的延迟。
        </p>
      </div>
    </div>
    <mm-comment :productid="productId" @func="getMallNameFromSon"></mm-comment>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmHeader from "../publicComponents/mmHeader.vue";
import mmFooter from "../publicComponents/mmFooter.vue";
import mmComment from "../publicComponents/mmComment.vue";
export default {
  data() {
    return {
      productName: '',
      productTitle: '',
      productImg: '',
      productInfo: [],
      productMall: '',
      productPrice: '',
      productStr: '',
      productId: ''
    }
  },
  created() {
    this.getProductInfo()
  },
  computed: {
    categoryTitle: function() {
      if(this.$store.state.categoryTitle === '') {
        console.log(this.$store.state.brandName)
        return this.$store.state.brandName
      }
      return this.$store.state.categoryTitle
    }
  },
  methods: {
    getProductInfo() {
      var id = this.$route.params.id
      this.productId = id
      this.$http.get('api/getproduct?'+id).then((res) => {
        var tt = res.body.result[0]
        this.productInfo.push(tt)
        console.log(this.productInfo)
        this.productImg = this.productInfo[0].productImg
        this.productStr = this.productInfo[0].bjShop
        this.productName = tt.productName.slice(0 ,10)
        this.productTitle = tt.productName
        this.productPrice = this.productStr.slice(this.productStr.indexOf('￥'),this.productStr.indexOf('￥')+10)
        // console.log(this.productInfo)
        // this.productMall = this.productStr.slice(this.productStr.indexOf('￥'),this.productStr.indexOf('￥')+10)
      })
    },
    imgUrl() {
      var num = this.productImg.indexOf('"')
      var num2 = this.productImg.indexOf('" alt')
      var str = this.productImg.slice(num+1 ,num2)
      return str
    },
    getMallNameFromSon(data) {
      this.productMall = data.slice(data.indexOf('：')+1)
    },
    handleBack() {
      this.$router.go(-1)
    }
  },
  components: {
    mmHeader,
    mmFooter,
    mmComment
  }
};
</script>
<style lang="less" scoped>
  @import '../../less/var';
  .container{
    .container-title {
      padding-left: 25/@base;
      height: 76/@base;
      line-height: 76/@base;
      color: #000;
      font-size: 26/@base;
      background-color: #f5f5f5;
      a {
        color: #000;
      }
      .mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
        padding: 8/@base 28/@base;
        font-size: 26/@base;
        margin-top: 8/@base;
        color: #000;
        background-color: #ccc;
      }
    }
    .mui-card-header {
      text-align: center;
      font-weight: 700;
    }
    .imgWrap {
      margin: 50/@base auto;
      img {
        display: block;
        width: 300/@base;
        margin: 0 auto;
        height: 300/@base;
      }
    }
    .mui-card-footer {
      text-align: center;
      height: 70/@base;
      line-height: 70/@base;
      border: 1px solid brown;
      border-left: none;
      border-right: none;
      padding: 0;
      min-height: unset;
     
      div {
        height: 100%;
        line-height: 70/@base;
        color: #fff;
        background-color: #ff960e;
        font-size: 28/@base;
      }
      div:nth-child(2) {
        border-left: 1px solid brown;
        background-color: #ffc526;
        border-right: 1px solid brown;
      }
      div:nth-child(3) {
        background-color: #ffc526;
      }
    }
    .mall {
      font-size: 30/@base;
      height: 90/@base;
      line-height: 90/@base;
      background-color: #fff;
      padding-left: 26/@base; 
      border-bottom: 1px solid #ccc;
      .mall-right ,
      .mall-left {
        height: 90/@base;
      }
      .mall-right {
        .mui-btn, button, input[type=button], input[type=reset], input[type=submit]{
          padding: 10/@base 10/@base;
          font-size: 24/@base;
          margin: 18/@base 18/@base 0 0;
        }
        span {
          color: red;
          margin-right: 35/@base;
          font-weight: 700;
        }
      }
    }
    .mall-tip {
      padding: 10/@base;
      background-color: #fff;
      p {
        font-size: 22/@base;
        color: #000;
        line-height: 1.5;
        opacity: 0.6;
      }
    }
  }
</style>
